<!--
 * @Author: your name
 * @Date: 2021-01-03 17:40:22
 * @LastEditTime: 2021-01-12 18:11:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shopping\src\pages\index\main.vue
-->
<template>
  <view class="">
    <Search />
    <!-- 
    indicator-dots:是否开启原点 
    autoplay：是否开启自动滚动
    interval：轮播的速度
    indicator-color:没选中原点的颜色
    indicator-active-color:选中原点的颜色
    circular:是否采用衔接滑动 (是否循环轮播)
   -->
    <swiper
      class="swiper"
      indicator-color="background: rgba(0,0,0,0.40)"
      indicator-active-color="#ea4350"
      indicator-dots="true"
      autoplay="true"
      interval="3000"
      circular="true"
    >
      <swiper-item v-for="item in swiperData" :key="item.goods_id">
        <navigator :url="`/pages/goods_detail/main?goods_id=${item.goods_id}`">
          <image :src="item.image_src" mode="aspectFit" />
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 主导航 -->
    <view class="main_nav">
      <view class="nav_item" v-for="(item, index) in navData" :key="index">
        <navigator
          class="navigator"
          :url="item.navigator_url"
          :open-type="item.open_type"
          hover-class="none"
        >
          <image :src="item.image_src" />
        </navigator>
      </view>
    </view>

    <!-- 商品展示 -->
    <view class="goods_list">
      <view class="goods" v-for="(item, index) in floorData" :key="index">
        <view class="title"><image :src="item.floor_title.image_src" /></view>
        <view class="main_goods">
          <navigator
            class="goods_item"
            v-for="(goods, index) in item.product_list"
            :key="index"
            :url="goods.navigator_url"
            :open-type="goods.open_type"
            hover-class="none"
            :style="'width:' + goods.image_width + 'rpx'"
          >
            <image :src="goods.image_src" lazy-load="true" />
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getSwiperData, getNavData, getFloorData } from "@/api/index.js";
console.log(getSwiperData);
export default {
  components: {},
  data() {
    return {
      swiperData: [],
      navData: [],
      floorData: [],
    };
  },
  async onLoad() {
    const swiperData = await getSwiperData();
    this.swiperData=swiperData.data.message
    const navData = await getNavData();
    this.navData = navData.data.message
    this.getFloorData()
  },
  methods: {
    // 获取楼层图片
    async getFloorData() {
      const floorData = await getFloorData();
      floorData.data.message.forEach((item) => {
        item.product_list.forEach((goods) => {
          goods.navigator_url = goods.navigator_url.replace("?", "/main?");
        });
      });

      this.floorData = floorData.data.message;
    },
  },
};
</script>

<style lang="less" scoped>
.swiper {
  height: 340rpx;
  navigator {
    width: 100%;
    height: 100%;
  }
}
.swiper swiper-item image {
  width: 100%;
  height: 100%;
}

.main_nav {
  display: flex;
  justify-content: space-evenly;
  padding: 10rpx 0;

}
.main_nav .nav_item .navigator {
  width: 128rpx;
  height: 140rpx;
}
.main_nav .nav_item image {
  width: 100%;
  height: 100%;
}

.goods_list .goods {
  margin-top: 43rpx;
  padding: 0 10rpx;
}
.goods_list .goods .title {
  height: 59rpx;
  margin-bottom: 10rpx;
}

.goods_list .goods .title image {
  height: 100%;
  width: 100%;
}

.main_goods {
  overflow: hidden;
  .goods_item {
    float: left;
    height: 188rpx;
    margin-left: 10rpx;
    margin-bottom: 10rpx;
    &:nth-child(1) {
      height: 386rpx;
    }

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>